<template>
  <div class="user">
    <div class="user-info">
      <img :src="user.avatar" alt="" />

      <div class="right">{{ user.username }}</div>
    </div>

    <div class="center">
      <div>
        <van-icon name="underway-o" size="3rem" />
        <div>历史记录</div>
      </div>
      <div>
        <van-icon
          name="bookmark-o"
          size="3rem"
          @click="$router.push({ path: '/layout/collect' })"
        />
        <div>我的收藏</div>
      </div>
      <div>
        <van-icon
          name="thumb-circle-o"
          size="3rem"
          @click="$router.push({ path: '/layout/like' })"
        />
        <div>我的点赞</div>
      </div>
    </div>
    <div class="bottom">
      <div class="box">
        <div class="left">推荐分享</div>
        <div class="right"><van-icon name="arrow" /></div>
      </div>
      <div class="box">
        <div class="left">意见反馈</div>
        <div class="right"><van-icon name="arrow" /></div>
      </div>
      <div class="box">
        <div class="left">关于我们</div>
        <div class="right"><van-icon name="arrow" /></div>
      </div>
      <div class="box" @click="logout">
        <div class="left">退出登录</div>
        <div class="right"><van-icon name="arrow" /></div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      user: {},
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    async getUser() {
      axios({
        url: "http://interview-api-t.itheima.net/h5/user/currentUser",
        method: "get",
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      }).then((res) => {
        this.user = res.data.data;
        console.log(this.user);
      });
    },
    async logout() {
      await axios({
        url: "http://interview-api-t.itheima.net/h5/user/logout",
        method: "get",
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      });

      this.$toast.success("退出登录成功");
      localStorage.removeItem("token");
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.user {
  height: 100%;
  .user-info {
    height: 100px;
    line-height: 100px;

    display: flex;
    justify-content: left;
    align-items: center;
    padding: 10px 10px;
    img {
      width: 50px;
      height: 50px;
      background-color: #fff;
      padding: 10px;
      border-radius: 50%;
    }
    .right {
      flex: 1;
      font-size: 20px;
      font-weight: 600;
      margin-left: 10px;
    }
  }
  .center {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    padding: 10px 20px;
    div {
      text-align: center;
    }
  }
  .bottom {
    margin-top: 10px;
    .box {
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
    }
  }
}
</style>
